

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>formCreate 动态生成表单且绑定事件 - layui 第三方扩展组件示例</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
        <link rel="stylesheet" href="../../../layui_exts/formCreate/formCreate.css" media="all">
    </head>
    <body>

        <div style="padding: 50px;">
            <div class="layui-form" lay-filter="LAY-system-config-setting-form">
                <div id="LAY-system-config-setting-form-create"></div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <input type="button" lay-submit lay-filter="LAY-system-config-setting-submit" value="确认" class="layui-btn">
                    </div>
                </div>
            </div>
        </div>

        <div style="padding: 0 50px;">
            <blockquote class="layui-elem-quote layui-quote-nm" style="color: #999;">
                如果无法正常运行，请修改 layui.css、layui.js 及 layui.config() 方法参数中的 base 等相关路径。
            </blockquote>
        </div>

        <script src="../../../layui/layui.js"></script>
        <script>
            layui.config({
                base: '../../../layui_exts/' //配置 layui 第三方扩展组件存放的基础目录
            }).extend({
                formCreate: 'formCreate/formCreate'
            }).use(['formCreate', 'form'], function () {
                var formCreate = layui.formCreate, form = layui.form;
                var data = [
                    {
                        "id": 1,
                        "name": "system_action_log_open",
                        "title": "系统日志",
                        "type": "radio",
                        "params": "0=关闭\n1=开启",
                        "rules": "",
                        "value": "1",
                        "descs": "开启记录系统操作日志"
                    },
                    {
                        "id": 2,
                        "name": "admin_name",
                        "title": "系统名称",
                        "type": "text",
                        "params": "",
                        "rules": "required",
                        "value": "",
                        "descs": "系统后台的名称"
                    },
                    {
                        "id": 3,
                        "name": "file",
                        "title": "后台地址",
                        "type": "upload",
                        "params": "accept=file",
                        "rules": "required",
                        "value": "http://www.admin.com/upload/admin/20210305/6e2c5521f0e7548a45f260a09503973e.jpg",
                        "descs": "上传单个文件"
                    },
                    {
                        "id": 4,
                        "name": "image",
                        "title": "上传",
                        "type": "upload",
                        "params": "",
                        "rules": "required",
                        "value": "",
                        "descs": "上传单个图片"
                    }
                ];
                //执行示例
                formCreate.render({
                    elem: '#LAY-system-config-setting-form-create',
                    data: data,
                    callback: function (dom) {
                        form.render(null, 'LAY-system-config-setting-form');
                        //监听提交
                        form.on('submit(LAY-system-config-setting-submit)', function (data) {
                            var field = data.field; //获取提交的字段
                            console.log(field);
                        });
                    }
                });
            });
        </script>
    </body>
</html>


